<!DOCTYPE html>

<head>
  <title>Paint-CSC309</title>
  <script type="text/javascript" src="paint.js">
  </script>
  <link rel="stylesheet" href="paint.css" />

</head>
<body>
    <header class="header"> Paint program <p id="coord">   120 ,120 </p>
			<table class="propertyTable" >
				<tr>
					<td>Selected Tool</td>		
				<td id="selectedTool" ></td>
					<td>Selected Color</td>
					<td id="SelectedColor"></td>		
				</tr>
			</table>
    </header>
    <aside class="aside1">
        <table  class="selectTool" cellpadding="5" cellspacing="1">
          <tr>
            <td ><img src="pencil.png" height="30 "  onclick=""></td>
            <td><img src="eraser.png" height="30" onclick=""></td>
          </tr>
          <tr>
            <td onclick=" setMode(2)"><img src="rect.png"></td>
            <td onclick="setMode(3)"><img src="circle.png"></td>
          </tr>
          <tr>
            <td onclick="setMode(1)"><img src="line.png"></td>
            <td onclick="setMode(0)">sel</td>
          </tr>
              <tr>
            <td ></td>
            <td ></td>
          </tr>
            <tr>
            <td ></td>
            <td ></td>
          </tr>
          <tr>
          
            <td colspan="2">
                  <select>
                  <option  VALUE=" 0.5 " >BrushSize  </option>
                  <option VALUE=" 0.3" onclick="setBrushSize(event)"> 0.3 </option>
                  <option VALUE=" 0.5" onclick="setBrushSize(event)"> 0.5 </option>
                  <option VALUE=" 1" onclick="setBrushSize(event)"> 1 </option>
                  <option VALUE=" 2" onclick="setBrushSize(event)"> 2 </option>
                  <option VALUE="3" onclick="setBrushSize(event)">3</option>
                  <option VALUE="4" onclick="setBrushSize(event)">4</option>
                  <option VALUE="5" onclick="setBrushSize(event)">5</option>
                  </select>
            </td>

          </tr>
        
          <tr >
            <td style="background: black;" id="black" onclick="SetColor(event)"></td>
            <td style="background: white;" id="white" onclick="SetColor(event)"></td>
          </tr>
          <tr>
            <td style="background: red;" id="red" onclick="SetColor(event)"></td>
            <td style="background: blue;" id="blue" onclick="SetColor(event)"></td>
          </tr>
          <tr>
            <td style="background: yellow;" id="yellow" onclick="SetColor(event)"></td>
            <td style="background: green;" id="green" onclick="SetColor(event)"></td>
          </tr>
            <tr>
            <td style="background: maroon;" id="maroon" onclick="SetColor(event)"></td>
            <td style="background: aqua;" id="aqua" onclick="SetColor(event)"></td>
          </tr>	

          
        </table>
    </aside>
    <canvas id="canvas1" width="700" height="800">    
        Your Browser does not support canvas. please update to latest version
    </canvas>
    <canvas id="canvas2"   width="700" height="800">
    </canvas>

	<div class="propertyWindow" id="propertyWindow">
			Property Window :<br><br>
			<table>
					<tr>
						<td><input type="button" value="solid-fill" onclick="setFill()"></td>
						<td><input type="button" value="No-fill" onclick="resetFill()"></td>
					</tr>
		
</table></br>
<b>Size :<b>
<input type="button" value="  +  " onclick="IncreaseSize()">
						<input type="button" value="  -   " onclick="DecreaseSize()"></br>
	we can have : font size , font type , brush size etc
	</div>

</body>

</html>
